import { defineComponent, ref} from "vue";
import { useRouter } from "vue-router";
import styles from "./BranchAssociation.module.less";
export default defineComponent({
  name:'userCenterBranchAssociation',
  setup() {
    const router = useRouter();
    const form = ref({
      institution_name: '',//机构名称
      realname: '',//机构联系人
      mobile: '',//手机号
      code: '',//统一社会信用代码
    });

    const rules = {
      institution_name: [
        {required: true, message: '请输入机构名称', trigger: 'blur'}
      ],
      realname: [
        {required: true, message: '请输入机构联系人', trigger: 'blur'}
      ],
      mobile: [
        {required: true, message: '请输入手机号', trigger: 'blur'}
      ],
      code: [
        {required: true, message: '请输入统一社会信用代码', trigger: 'blur'}
      ],
    };

    //提交
    const submit = () => {
      
    };

    return () => (
      <div class={styles.branchAssociation}>
        <div class={styles['header-box']}>新增/分社关联</div>
        <div class={styles.container}>
          <a-form model={form.value} label-col={{ style: { width: '160px' } }} rules={rules}>
            <a-form-item
              label="机构名称"
              name="institution_name"
            >
              <a-input style={{ width: '500px' }} placeholder="请输入机构名称" v-model:value={form.value.institution_name} />
            </a-form-item>
            <a-form-item
              label="机构联系人"
              name="realname"
            >
              <a-input style={{ width: '500px' }} placeholder="请输入机构联系人" v-model:value={form.value.realname} />
            </a-form-item>
            <a-form-item
              label="联系人手机号(用户名)"
              name="mobile"
              required
            >
              <a-input style={{ width: '500px' }} placeholder="请输入联系人手机号" v-model:value={form.value.mobile} />
              <div class={styles.tips}>联系人手机号默认为登陆账号即用户名，登录密码默认为：123456</div>
            </a-form-item>
            <a-form-item
              label="统一社会信用代码"
              name="code"
              required
            >
              <a-input style={{ width: '500px' }} placeholder="请输入统一社会信用代码" v-model:value={form.value.code} />
            </a-form-item>
          </a-form>
          <div class={styles['btn-box']}>
            <div class={styles['cancel']} onClick={()=>{ router.go(-1) }}>取消</div>
            <div class={styles['submit']} onClick={()=>{ submit() }}>提交</div>
          </div>
        </div>
      </div>
    )
  }
})

// import { computed, defineComponent, reactive } from "vue";
// import styles from "./BranchAssociation.module.less";
// import { SearchOutlined } from "@ant-design/icons-vue";
// import { imgPath } from "@/common/utils";
// export default defineComponent({

//   setup() {

//     const state = reactive({
//       search: '',
//       columns:[
//         {
//           title: "ID",
//           dataIndex: "id",
//           key: "id",
//           align: "center",
//           width: "100px",
//         },
//         {
//           title: "企业名称",
//           dataIndex: "travelAgency",
//           align: "left",
//           width: "150px",
//         },
//         {
//           title: "所在地区",
//           dataIndex: "area",
//           align: "left",
//           width: "150px",
//         },
//         {
//           title: "类型",
//           dataIndex: "type",
//           align: "left",
//           width: "90px",
//         },
//         {
//           title: "经营许可证",
//           dataIndex: "businessLicense",
//           align: "left",
//           width: "120px",
//         },
//         {
//           title: "常用联系人",
//           dataIndex: "frequentContacts",
//           align: "left",
//           width: "100px",
//         },
//         {
//           title: "操作",
//           dataIndex: "operate",
//           align: "left",
//           width: "90px",
//         },
//       ],
//       list:[
//         {
//           id:1,
//           travelAgency:'宁波世纪美亚国际旅行社有限公司',
//           area:'宁波',
//           type:'分社',
//           businessLicense:'913302036684861005',
//           frequentContacts:'雷律',
//           operate:'取消关联',
//         }
//       ],
//       selectedRowKeys:[],
//     } as any)

//     //查询
//     const clickSearch = () => {
      
//     }
//     //一键关联
//     const clickAssociation = () =>{

//     }
//     //选中项变更
//     const onSelectChange = (changableRowKeys: any[]) => {
//       state.selectedRowKeys = changableRowKeys;
//     };
//     const rowSelection = computed(() => {
//       return {
//         selectedRowKeys: state.selectedRowKeys,
//         fixed: true,
//         onChange: onSelectChange,
//       }
//     })
//     return () => (
//       <div class={styles.branchAssociation}>
//         <div class={styles['header-box']}>新增/分社关联</div>
//         <div class={styles.container}>
//           <div class={styles['search-box']}>
//             <div class={styles['input-box']}>
//               <SearchOutlined class={styles['search-icon']} />
//               <input v-model={state.search} placeholder='请输入分社名称查询分社' />
//             </div>
//             <div class={styles['search-btn']} onClick={() => { clickSearch() }}>查询</div>
//           </div>
//           <div class={styles['branch-association-tips']}>
//             提示：关键字少于7位，只支持精确搜索；关键字大于等于7位，支持向后模糊搜索
//           </div>
//           <div class={styles['branch-association-message']}>
//             <p><div class={styles['img-box']}><img src={imgPath('/userCenter/branchAssociation1.png')} /></div>什么是精确搜索和向后模糊搜索？</p>
//             <p>
//               <div class={styles['img-box']}><img src={imgPath('/userCenter/branchAssociation2.png')} /></div>
//               精确搜索会根据您输入的内容检索出完全一致的数据。如您输入中青欧美组，会为您检索出旅行社名称为中青欧美组的数据
//             </p>
//             <p class={styles.indentation}>向后模糊搜索根据您输入的内容检索出以输入内容开头的数据。如您输入中青旅江苏国际，会为您检索出所有中青旅江苏国际...开头的数据</p>
//             <p><div class={styles['img-box']}><img src={imgPath('/userCenter/branchAssociation1.png')} /></div>为什么搜索不到我想要关联的分社？</p>
//             <p>
//               <div class={styles['img-box']}><img src={imgPath('/userCenter/branchAssociation2.png')} /></div>
//               1、请确认待关联分社是否已经在您的【已关联】或【待确认】分社列表中；
//             </p>
//             <p class={styles.indentation}>2、待关联分社必须已通过文旅保企业认证且未被其他企业关联，请向待关联分社/下属机构进一步确认</p>
//             <p><div class={styles['img-box']}><img src={imgPath('/userCenter/branchAssociation1.png')} /></div>为什么不能直接关联分社，还需要申请？</p>
//             <p>
//               <div class={styles['img-box']}><img src={imgPath('/userCenter/branchAssociation2.png')} /></div>
//               为保证旅行社信息的隐私和安全，需要您先提出“关联申请”，待另一方审核同意后才可关联成功
//             </p>
//           </div>
//           <div class={styles['association-btn-box']}>
//             <div class={styles['association-btn']} onClick={() => { clickAssociation() }}>一键关联</div>
//           </div>
//           <a-table
//             columns={state.columns}
//             bordered={true}
//             scroll={{ x: "max-content" }}
//             dataSource={state.list}
//             row-selection={rowSelection.value}
//             rowKey="id"
//           ></a-table>
//         </div>
//       </div>
//     )
//   }
// })